<template>
  <div class="RightMenu" :class="`themeMenu-${themeColor.theme}`">
    <div class="menu">
      <div
        v-for="item in menuList"
        :key="item.title"
        :class="
          (item.path == route.path || oldPath == item.path) &&
          `themeMenuFont-${themeColor.theme}`
        "
        @click="router.push(item.path)"
      >
        <svg class="icon" aria-hidden="true">
          <use :xlink:href="item.icon"></use>
        </svg>
        <p>{{ item.title }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useThemeColor } from "@/store/themeColor";
const router = useRouter();
const route = useRoute();
const themeColor = useThemeColor();
const oldPath = ref();
// 一键换肤动态改颜色
const activeColor = computed(() =>
  themeColor.theme == "white"
    ? "#2d8cf0"
    : themeColor.theme == "deeppink"
    ? "#fff"
    : "#b82525"
);
const menuList = [
  {
    icon: "#icon-yinle1",
    title: "个性推荐",
    path: "/individuality",
  },
  {
    icon: "#icon-gedan",
    title: "歌单",
    path: "/allmusiclist",
  },
  {
    icon: "#icon-paihangbang",
    title: "排行版",
    path: "/ranklist",
  },
  {
    icon: "#icon-yonghu",
    title: "歌手",
    path: "/artistList",
  },
  {
    icon: "#icon-MV",
    title: "MV",
    path: "/mv",
  },
  {
    icon: "#icon-yinle",
    title: "最新音乐",
    path: "/NewMusicDetail",
  },
];
watch(
  () => route.path,
  (n, o) => {
    oldPath.value = null;
    !menuList.map((item) => item.path).includes(n) && (oldPath.value = o);
  }
);
</script>

<style lang="less" scoped>
.RightMenu {
  position: fixed;
  font-size: 18px;
  top: 75px;
  left: 0;
  height: 100%;
  width: 400px;
  box-sizing: border-box;
  .menu {
    cursor: pointer;
    > div {
      margin-left: 30px;
      height: 50px;
      width: 130px;
      display: flex;
      align-items: center;
      line-height: 40px;
      > p {
        margin-left: 15px;
      }
    }
    > div:hover {
      color: v-bind(activeColor);
      margin-left: 1px;
      padding-left: 40px;
      border-left: 3px solid v-bind(activeColor);
    }
  }
}
</style>
